<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue.js</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
    <!-- vue-app是根容器 -->
    <div id="vue-app">
        <h1>Events</h1>
        <button @click.once="add(1)">涨一岁</button>
        <button @click="subtract(1)">减一岁</button>
        <button @dblclick="add(10)">涨十岁</button>
        <button @dblclick="subtract(10)">减十岁</button>
        <p>我的年龄是{{age}}</p>
        <div id="canvas" @mousemove="updateXY">{{x}}，{{y}} - <span @mousemove.stop>Stop move</span>
        </div>
        <a href="http://www.thenewstep.com" @click.prevent="alert">web开发</a>
    </div>

    <script src="app2.js"></script>
</body>

</html>